<template>
    <div id="personalCenter">
        <div class="head_portrait" @click="login">
                 <el-avatar :size="100"  :src="avatarsrc"></el-avatar>
                <span class="name">{{ $store.state.user.userName }}</span>
                <i class="el-icon-switch-button" v-if="$store.state.isToken" @click="outLog"></i>
        </div>
        <div class="list">
            <van-cell title="我的收藏" is-link to="collection"/>
            <van-cell title="我的作品" is-link to="works" />
        </div>

        <div class="btn" v-if=" $store.state.istoken">
          
        </div>
    </div>
</template>


<script>
import {Logout} from "../../api/User"

export default {
    name: 'PersonalCenter',

    data() {
        return {
            istoken:null,
            avatarsrc:require("../../assets/img/head.jpg")
        };
        
    },

    mounted() {
        
    },

    methods: {
      
        login(){
            if (localStorage.getItem("token")==null || !this.$store.state.isToken) {
                 this.$router.push("signin")
            }
        },

        async outLog(){
           let {data}=await Logout()
           if(data.code==200){
                localStorage.removeItem("token")
                this.$store.commit("AlteruserName",{
                    userId:-1,
                    userName:"点击登陆",
                });
                this.$store.commit("alterIsToken",false)
                
           }
        }
    },
};
</script>

<style lang="scss" scoped>
    #personalCenter{
        width: 100vw;
        
    }
    .head_portrait{
        margin: auto;
        width: 50vw;
        display: flex;
        flex-direction: column;
        align-items:center;
        padding-top: 10px;
        padding-bottom: 10px;
        .el-icon-switch-button{
            display: inline-block;
            font-size: 35px;
            position: absolute;
            right: 5vw;
        }
    }
    .name{
        font-size: 25px;
    }
    .list{
        padding-top: 5vh;
    }
    .van-cell{
        background: rgb(0,0,0,0);    
    }
</style>